<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    width="50%"
    @ok="handleSubmit"
  >
    <BasicTable @register="registerTable">
      <template #actionsCell="{ record }">
        <a-checkbox-group v-model:value="record.selectActions">
          <a-checkbox  v-for="(item, index) in record.actions" :value="item.actionsName" :id="item.key" @change="handleActionChange">{{ item.displayName }}</a-checkbox>
        </a-checkbox-group>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { role_nav_columns } from './role.data';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { handleTree } from '/@/utils/treeUtil';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getRoleNavigationList, putRoleNavigation } from '/@/api/sys/system';
  import { CheckboxGroup, Checkbox } from 'ant-design-vue';
  export default defineComponent({
    name: 'RoleNavigationModal',
    components: {
      BasicModal,
      BasicTable,
      ACheckboxGroup: CheckboxGroup,
      ACheckbox: Checkbox,
    },
    emits: ['success', 'register'],
    setup() {
      const { createMessage } = useMessage();
      const rowId = ref('');
      //const dataSource = ref();
      const [registerTable, { expandAll, reload, getRawDataSource }] = useTable({
        columns: role_nav_columns,
        useSearchForm: false,
        showTableSetting: false,
        pagination: false,
        isTreeTable: true,
        api: getRoleNavigationList,
        immediate: false,
        beforeFetch(params) {
          params['roleId'] = rowId.value;
          return params;
        },
        afterFetch: function (data) {
          expandAll();
          return handleTree(data, 'navigatioinId', 'parentId');
        },
        bordered: true,
        showIndexColumn: false,
        rowKey: 'navigatioinId',
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false });
        rowId.value = data.record.id;
        //const datalist = await getRoleNavigationList({ roleId: rowId.value });
        //setTableData(handleTree(datalist, 'navigatioinId', 'parentId'));
        reload();
      });

      const getTitle = '配置菜单';
      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true }); 
          let items: any = [];
          const temp_data = getRawDataSource(); 
          temp_data.filter((item) => {
            const selectItem = item.actions.filter((actionItem) => {
              return actionItem.isSelected;
            });
            if (selectItem.length > 0) {
              let temp_action_array: any = [];
              selectItem.forEach((element) => {
                temp_action_array.push(element.actionsName);
              });
              items.push({ navigationId: item.navigatioinId, actions: temp_action_array });
            }
          });
          await putRoleNavigation(rowId.value, { items: items });
          createMessage.success('修改成功!');
          closeModal();
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
      function handleActionChange(e: any) {
        const temp_data = getRawDataSource(); 
        temp_data.filter((item: any) => { 
          const temp_value = e.target.id.split('_');
          if (item.navigatioinId == temp_value[0]) {
            item.actions.forEach((actionItem) => {
              if (actionItem.key == e.target.id) {
                actionItem.isSelected = e.target.checked;
                return item;
              }
            });
          } 
        });
      }
      return {
        registerModal,
        registerTable,
        getTitle,
        handleSubmit,
        handleActionChange,
      };
    },
  });
</script>
